<template>
<view class="open" v-show='isshow'>
	<view class="all"  @click='close'></view>
	<view class="bot" :class="isshow1?'top':'bottom'" :style="{'padding-bottom': (bottom+10) + 'rpx'}">
		<view class="title_l">报名用户（{{list.length}}人）</view>
		<view class="botL">
			<view class="litem" v-for="(item,index) in list" :key='index'>
				<view @click="toP(index)" class="flex" :class="{qd:item.status==3}"><image :src="item.avatar||'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/pyq.png'" mode=""></image>{{item.username}}</view>
				<view class="" style="font-size: 12px;color:#666666">{{item.createtime}}</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
	export default {
		name:"open",
		props:['list'],
		data() {
			return {
				isshow:false,
				isshow1:false,
				bottom:0
			};
		},
		created() {
			let that = this
			uni.getSystemInfo({
			    success: function (res) {
			        let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
			        model.forEach(item => {
			            //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
			            if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
			                that.bottom = 40;
			            }
			        })
			    }
			});
		},
		methods:{
			toP(index){
				this.$emit('toP',index)
			},
			show(){
				this.isshow=true
				this.$nextTick(()=>{
					this.isshow1=true
				})
			},
			close(){
				this.isshow1=false
				setTimeout(()=>{
					this.isshow=false
				},300)
			},
			showhb(){
				this.$emit('showhaibao')
			}
		}
	}
</script>

<style scoped lang="scss">
.open{
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 101;
	background-color: rgba($color: #000000, $alpha: .5);
	.all{
		width: 100%;
		height: 100%;
	}
	.bot{
		position: absolute;
		z-index: 1001;
		bottom: 0;
		width: calc(100% - 24px);
		background-color: #fff;
		// display: flex;
		// text-align: center;
		transition: all 0.3s;
		height: 60%;
		padding: 10px 12px;
		.botL{
			height: calc(100% - 20px);
			width: 100%;
			overflow: auto;
		}
		.title_l{
			height: 36px;
			line-height: 26px;
			border-bottom: 2px solid #e5e5e5;
			color:#ff9933
		}
		.litem{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 8px 0;
			border-bottom: 1px solid #e5e5e5;
			.flex{
				display: flex;
				align-items: center;
				position: relative;
				image{
					width: 36px;
					height: 36px;
					margin-right: 12px;
					border-radius: 18px;
					position: relative;
				}
			}
			.qd::after{
				position: absolute;
				content:' ';
				background: url(https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/qiandao.png) no-repeat;
				width: 22px;
				height: 22px;
				background-size: 100% 100%;
				top: -4px;
				left: 20px;
			}
		}
	}
	.bottom{
		transform: translateY(100%);
	}
}
</style>
